<template>
  <div class="box">
    <div class="box2">
      <div class="login-div" v-if="!register" v-loading="loading">
        <el-text class="mx-1" size="large">请使用账号密码登录</el-text>
        <div class="div-space">
          <el-input v-model="loginBody.username" placeholder="请输入账号" />
        </div>
        <div class="div-space">
          <el-input v-model="loginBody.password" placeholder="请输入密码" @keyup.enter="toLogin"  />
        </div>
        <div class="">
          <el-button type="primary" @click="toLogin" auto-insert-space>登录</el-button>
        </div>
        <div class="">
          <el-text class="mx-1" size="small" @click="changeRegister()">还没有账号？<el-text class="mx-1 toFinger" type="primary">注册</el-text>一个</el-text>
        </div>
      </div>
      <div class="login-div" v-if="register" v-loading="loading">
        <el-text class="mx-1" size="large">请输入账号密码注册</el-text>
        <div class="div-space">
          <el-input v-model="registerBody.username" placeholder="请输入账号" />
        </div>
        <div class="div-space">
          <el-input v-model="registerBody.password" placeholder="请输入密码" />
        </div>
        <div class="">
          <el-button type="primary" @click="onRegister" auto-insert-space>注册</el-button>
        </div>
        <div class="">
          <el-text class="mx-1" size="small" @click="changeRegister()">
            已有账号？去<el-text class="mx-1 toFinger" type="primary">登录</el-text>
          </el-text>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {reactive, ref} from 'vue'
import {useCounterStore} from '@/stores/counter'
import {useRouter} from 'vue-router'
import {login} from '@/network/api_login'
import {ElNotification} from 'element-plus'
import {CODE_SUCCESS} from '@/common_js/common_variable'

export default {
  name: 'Login',
  setup() {
    const countStore = useCounterStore()
    const router = useRouter()
    // const count = computed(() => store.state.count);

    let loading = ref(false)
    let register = ref(false)
    const loginBody = reactive({
      username: '',
      password: '',
      verifyCode: '',
    })
    const registerBody = reactive({
      username: '',
      password: '',
      verifyCode: '',
    })
    const changeRegister = () => {
      register.value = !register.value
      loadLoading()
      closeLoading(200)
    }
    const loadLoading = () => {
      loading.value = true
    }
    const closeLoading = millisecond => {
      setTimeout(() => {
        loading.value = false
      }, millisecond)
    }
    const toLogin = () => {
      loadLoading()
      login(loginBody.username, loginBody.password)
        .then(response => {
          if (response.code != CODE_SUCCESS) {
            ElNotification({
              title: response.code,
              message: response.message,
              type: 'error',
            })
            return
          }
          console.log(response.data);
          console.log(response.data.nickName);
          
          countStore.saveLoginInfo(response.data.token, response.data.userId, response.data.nickName);
          router.push('/index')
        })
        .catch(error => {
          console.error('登录失败', error)
          ElNotification({
            title: '请求失败',
            message: error.message,
            type: 'error',
          })
          // 处理登录失败的逻辑
        })
        .finally(() => {
          closeLoading(0)
        })
    }
    const onRegister = () => {
      ElNotification({
        title: '错误',
        message: '这是一条错误的提示消息',
        type: 'error',
      })
    }
    return {
      loading,
      register,
      loginBody,
      registerBody,
      changeRegister,
      loadLoading,
      toLogin,
      onRegister,

      border: true,
    }
  },
}
</script>

<style scoped>
.box {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}

.box2 {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.div-space{
  margin: 15px auto;
}

.login-div {
  width: 30vw;
  min-width: 300px;
  max-width: 400px;
  /* min-height: 225px; */
  border: 1px solid rgb(100, 217, 247);
  border-radius: 10px;
  padding: 15px;
}

.toFinger{
  cursor: pointer;
}
</style>